<template>
  <div>
    <h1>子组件</h1>
    <h2>{{ info }}</h2>
    <h2>{{ obj }}</h2>
    <h2>{{ msg.msg }}</h2>
    <h2>{{ msg1 }}</h2>
    <h2>vue2当中attrs的用法</h2>
    <h2>{{ $attrs.msg }}</h2>
    <button @click="pinchuan">拼串</button>
    <grand-son></grand-son>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import GrandSon from "./GrandSon.vue";

export default defineComponent({
  components:{ GrandSon },
  //   props: ["info", "obj"],
  //在vue3当中很多的方法定义，都在setup当中进行定义
  props: {
    info: {
      type: String,
      required: true,
      default: "xxx",
    },
    obj: {
      type: Object,
      required: false,
      default: () => {
        return {}; //写默认值时，对于基本类型直接写初始值即可，对于引用数据类型（数组和对象），需要写成函数的格式
      },
    },
  },
  emits: ["fun", "foo"], //传递过来的自定义事件名字 可写可不写
  //setup的参数 的参数有两个 props,context对象
  setup(props, context) {
    //在setup当中传入的参数props,变为一个proxy对象
    console.log(props);
    console.log(props.info);
    console.log(props.obj);
    console.log(context);
    console.log(context.attrs);
    console.log(context.attrs.msg);
    const msg = context.attrs; //proxy对象  reactive包裹了一个对象，变成一个proxy对象 该类对象是响应式的
    const msg1 = ref(context.attrs.msg); //ref对象
    console.log(context.emit);
    // 调用事件，相当于this.$emit  触发分发事件
    context.emit("fun", "秋名山上行人稀，常有车手较高低");

    //当用户点击界面上的按钮 拼串，触发fun事件
    function pinchuan() {
      context.emit("fun", "秋名山上行人稀，常有车手较高低");
      context.emit("foo");
    }

    // slots插槽
    console.log(context.slots);
    return {
      msg,
      msg1,
      pinchuan,
    };
  },
  //解构
  //setup(props,{attrs,emit,slots}){}
  mounted() {
    console.log(this.$attrs);
  },
});
</script>

<style scoped>
</style>